import React, { Component } from 'react'
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout'
import { TableCustomize, openSuccessModal, openModalMessage, compareNum, } from '../../../components/TableCustomize';
import { Button, Col, Row, Progress, Tag, Steps, Alert, Form, PageHeader, Divider, Collapse, Modal } from 'antd'
import * as StockRequisition from '../../../axios/StockRequisition'
import QRCode from 'qrcode.react';
const { Panel } = Collapse;
const FormItem = Form.Item
export default class GetParticulars extends Component {
    state = {
        dataSource: [
        ],
        conceal: true,
        conceal1: null,
        visible: false,
        acceptCode: null
    }

    // 挂载后
    componentDidMount() {
        let data = JSON.parse(localStorage.getItem('detailData'))
        this.search(data)
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    // 查询接口
    search = (value) => {
        let data = `acceptCode=${value}`
        StockRequisition.acceptBatchNum(data).then((item) => {
            console.log('查询数据', item);
            if (item.data.code !== 200) {
                openModalMessage('error', item.data.msg)
                return
            }
            this.setState({
                allData: item.data.data,
                warehouseList: item.data.data.warehouseList,
                percent: item.data.data.process?.split('%')[0]
            })
        })
    }
    // 二维码
    examine = (v, i, e) => {
        // 阻止冒泡
        e.stopPropagation()
        this.setState({
            visible: true,
            acceptCode: v.acceptCode
        })
    }
    // 确认
    handleOk = () => {
        this.setState({
            visible: false,
            acceptCode: null
        })
    }
    // 取消
    handleCancels = () => {
        this.setState({
            visible: false,
            acceptCode: null
        })
    }
    // 设置折叠
    conceal = (v, index) => {
        const { conceal, conceal1 } = this.state
        console.log(v, index, conceal, conceal1);
        this.setState({
            conceal: !conceal,
            conceal1: index
        }, () => { console.log(v, index); })
    }

    render() {
        const { visible, dataSource, loading, allData, conceal, conceal1, percent } = this.state
        const columns = [
            {
                title: '序号',
                dataIndex: 'number',
                width: 50,

                render: (text, record, index) =>
                    <div>
                        {index + 1}
                    </div>
            },
            {
                title: '批号',
                dataIndex: 'batchNo',

                width: 100,
                sorter: (a, b) => compareNum(a.batchNo, b.batchNo),
            },

            {
                title: '机型',
                width: 80,
                dataIndex: 'model',

                sorter: (a, b) => compareNum(a.one1, b.one1),
            },
            {
                title: '物料编码',
                width: 110,
                dataIndex: 'partCode',

                sorter: (a, b) => compareNum(a.one1, b.one1),
            },
            {
                title: '图号',
                width: 80,
                dataIndex: 'paperCode',

                sorter: (a, b) => compareNum(a.one1, b.one1),
            },
            {
                title: '部件',
                width: 80,
                dataIndex: 'component',

            },
            {
                title: '物料名称',
                width: 100,
                dataIndex: 'partName',

            },
            {
                title: '物料规格',
                width: 100,
                dataIndex: 'partSpec',

            },
            {
                title: '发料数量',
                width: 120,
                dataIndex: 'outNum',

                sorter: (a, b) => compareNum(a.outNum, b.outNum),
            },
            {
                title: '发料状态',
                width: 120,
                dataIndex: 'status',
                sorter: (a, b) => compareNum(a.status, b.status),
                render: (text) => {
                    return text == 1 ? '待确认' : text == 2 ? '未完成' : text == 3 ? '已完成' : ''
                }
            },
            {
                title: '备注',
                width: 80,
                dataIndex: 'remark',
            },
            {
                title: '发起时间',
                width: 100,
                dataIndex: 'createTime',

            },
            {
                title: '发起人',
                dataIndex: 'createName',

            },
        ]
        return (
            <div>
                <BasicLayoutSearch>
                    <PageHeader
                        style={{ padding: '4px 24px' }}
                        onBack={() => window.history.back()}
                        title={'领料单查询页'}>
                    </PageHeader>
                    <Divider />
                    <Row gutter={24}>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div style={{ fontWeight: 'bold' }}>领  料  单：{allData ? allData.acceptCode : null}</div>
                            <div style={{ fontWeight: 'bold' }}>部       门：大机总装</div>
                        </Col>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div style={{ fontWeight: 'bold' }}>批     号  ：{allData ? allData.batchNo : null}</div>
                            <div style={{ fontWeight: 'bold' }}>班     组  ：{allData ? allData.groupName : null}</div>
                        </Col>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div style={{ fontWeight: 'bold' }}>项      数 ：共  {allData ? allData.total : null}  项</div>
                            <div style={{ fontWeight: 'bold' }}>机      位 ：{allData ? allData.seatName : null}</div>
                        </Col>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div style={{ fontWeight: 'bold' }}>发料进度</div>
                            <div>
                                <Progress percent={Number(percent)} style={{ width: '150px' }} format={(percent, successPercent) => percent + '%'} />
                            </div>
                            <div>
                                <Tag color="#d9001b">{allData ? (allData.isRush === 1 ? '加急' : null) : null}</Tag>
                                <Tag color="#d9001b">{allData ? (allData.isLack === 1 ? '欠料' : null) : null}</Tag>
                            </div>
                        </Col>
                    </Row>
                </BasicLayoutSearch>
                {/* {
                    this.state.warehouseList ? this.state.warehouseList.map((value, index) => {
                        return <BasicLayoutSearch key={value.warehouseCode}>
                            <Form className="search-form" >
                                <Row gutter={24}>
                                    <Col span={3}>
                                        <FormItem>
                                            <span style={{ fontWeight: 'bold' }}>仓库：{value.storeName}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={3}>
                                        <FormItem>
                                            <span style={{ fontWeight: 'bold' }}>批次：{value.batchNum}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={3}>
                                        <FormItem>
                                            <span style={{ fontWeight: 'bold' }}>项数: 共 {<span style={{ color: '#40a9ff' }}>{value.warehouseTotal}</span>} 项</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={4}>
                                        <FormItem>
                                            <span style={{ fontWeight: 'bold' }}>领料单：{value.acceptCode}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={4}>
                                        <FormItem>
                                            <span style={{ fontWeight: 'bold' }}>出库单：<span style={{ color: '#e15566' }}>{value.warehouseCode}</span></span>
                                        </FormItem>
                                    </Col>
                                    <Col span={4} style={{ display: 'flex' }}>
                                        <FormItem style={{ marginRight: '10px' }}>
                                            <Button type="primary" onClick={this.examine.bind(this, value, index)}>查看二维码</Button>
                                        </FormItem>
                                        <FormItem>
                                            <Button type="primary" onClick={this.conceal.bind(this, value, index)}>折叠</Button>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                            {
                                !conceal ? <TableCustomize columns={columns} rowKey={(record) => record.id} dataSource={value.warehouseBatchNumDetailVOList} pagination={false} loading={loading} allowDrafting={true}></TableCustomize> : null
                            }
                        </BasicLayoutSearch>
                    }) : null
                } */}

                <Collapse accordion
                    style={{
                        width: '99%', margin: 'auto', background: '#ffffff', height: '100vh',
                        boxShadow: '0 1px 6px rgb(0 0 0 / 10%), 0 1px 4px rgb(0 0 0 / 10%)',
                        borderRadius: '2px',
                    }}
                >
                    {
                        this.state.warehouseList ? this.state.warehouseList.map((value, index) => {
                            return <Panel
                                style={{ background: '#ffffff' }}
                                showArrow={false}
                                header={<Form className="search-form" >
                                    <Row gutter={24}>
                                        <Col span={3}>
                                            <FormItem>
                                                <span style={{ fontWeight: 'bold' }}>仓库：{value.storeName}</span>
                                            </FormItem>
                                        </Col>
                                        <Col span={3}>
                                            <FormItem>
                                                <span style={{ fontWeight: 'bold' }}>批次：{value.batchNum}</span>
                                            </FormItem>
                                        </Col>
                                        <Col span={3}>
                                            <FormItem>
                                                <span style={{ fontWeight: 'bold' }}>项数: 共 {<span style={{ color: '#40a9ff' }}>{value.warehouseTotal}</span>} 项</span>
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <FormItem>
                                                <span style={{ fontWeight: 'bold' }}>领料单：{value.acceptCode}</span>
                                            </FormItem>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem>
                                                <span style={{ fontWeight: 'bold' }}>出库单：<span style={{ color: '#e15566' }}>{value.warehouseCode}</span></span>
                                            </FormItem>
                                        </Col>
                                        <Col span={4} style={{ display: 'flex' }}>
                                            <FormItem style={{ marginRight: '10px' }}>
                                                <Button type="primary" onClick={this.examine.bind(this, value, index)}>查看二维码</Button>
                                            </FormItem>
                                            {/* <FormItem>
                                                <Button type="primary" onClick={this.conceal.bind(this, value, index)}>折叠</Button>
                                            </FormItem> */}
                                        </Col>
                                    </Row>
                                </Form>} key={value.warehouseCode}>
                                <TableCustomize
                                    columns={columns}
                                    rowKey={(record) => record.id}
                                    dataSource={value.warehouseBatchNumDetailVOList}
                                    pagination={false}
                                    loading={loading}
                                    allowDrafting={true}
                                    rowClassName={(record, index) => {
                                        return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                                    }}
                                ></TableCustomize>
                            </Panel>
                        }) : null
                    }
                </Collapse>
                <Modal
                    title="二维码"
                    visible={visible}
                    maskClosable={true}
                    onOk={this.handleOk}
                    onCancel={this.handleCancels}
                    okText="确认"
                    cancelText="关闭"
                >
                    <QRCode
                        style={{ marginLeft: '130px' }}
                        value={this.state.acceptCode ? this.state.acceptCode : '空'}  //value参数为生成二维码的链接
                        size={200} //二维码的宽高尺寸
                        fgColor="#000000"  //二维码的颜色
                    />
                </Modal>
            </div>
        )
    }
}
